<!DOCTYPE html>
<html>
<head>
    <title>Smoke test diff helper</title>
    <script type="text/javascript" src="../node_modules/imagediff/imagediff.js"></script>
    <script type="text/javascript" src="diffHelper.js"></script>
    <script type="text/javascript">
        var getImageForUrl = function (url, successCallback, errorCallback) {
            var image = new window.Image();

            image.onload = function () {
                successCallback(image);
            };
            if (errorCallback) {
                image.onerror = errorCallback;
            }
            image.src = url;
        };

        var canvasForImageCanvas = function (imageData) {
            var canvas = document.createElement("canvas"),
                context;

            canvas.height = imageData.height;
            canvas.width  = imageData.width;

            context = canvas.getContext("2d");
            context.putImageData(imageData, 0, 0);

            return canvas;
        };

        var renderDiff = function (image1, image2) {
            var canvas = canvasForImageCanvas(imagediff.diff(image1, image2));

            document.getElementsByTagName("body")[0].appendChild(canvas);
        };

        var isEqual = function (imageUrl1, imageUrl2, threshold) {
            return new Promise(function (fulfill) {
                getImageForUrl(imageUrl1, function (image1) {
                    getImageForUrl(imageUrl2, function (image2) {
                        var equal = diffHelper.imageEquals(image1, image2, threshold);

                        renderDiff(image1, image2);
                        fulfill(equal);
                    });
                });
            });
        };
    </script>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
</body>
</html>
